<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 实现一个计算属性显示全名的案例 -->
        <div>
            <p>
                姓: <input type="text" v-model="firstname">
            </p>
            <p>
                名: <input type="text" v-model="lastname">
            </p>
            <p>
                姓名: <input type="text" v-model="fullname">
            </p>

        </div>
    </div>
</body>

</html>
<script>
    // 函数实现
    // v-model 不允许赋值为函数, 报错

    //计算属性的定义: 
    // 根据 data中的值,生成一个新的值,新值依赖于 data中的某些值
    // 也可以理解为计算属性监听依赖的值的变化
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                firstname: '', // 姓
                lastname: '', // 名 
                //fullname: '' // 全名
            }
        },
        computed: {
            // 计算属性的第一种写法: 简写方式,该方式 该计算属性的值不能被修改
            // 该写法相当于只有get 方法
            // fullname() {
            //     // 必须有return 
            //     return this.firstname + this.lastname
            // },

            // 计算属性的第二种写法, 特点: 可以修改计算属性的值
            fullname: {
                get() {
                    //当访问该计算属性的时候执行
                    return this.firstname + this.lastname
                },
                set(newvalue) {
                    // 当修改该计算属性的时候触发该set 方法, 
                    // newvalue 就是修改的新值
                    console.log('newvalue', newvalue);
                    this.firstname = newvalue.substr(0, 1);
                    this.lastname = newvalue.substr(1)

                }
            }

        },
        methods: {
            fullnameFn() {

                return '全名'
            }
        }
    }).mount('#app') 
</script>